<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>国内疫情</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script src="http://cdn.zaixianke.com/china.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery-3.4.0.min.js"></script>
	<style type="text/css">
		.shuju1{
			height: 230px;
			width: 100%;
			position: relative;
			top: 0px;
		}
		.title1{
			position: relative;
			left: 20px;
			top: 0px;
		}
		.neirong{
			height: 200px;
			width: 640px;
			position: relative;
			left: 80px;
			margin: 0px;
		}
		#diyihang{
			height: 100px;
			width: 100%;
			position: relative;
			top: 0px;
			left: 0px;
		}
		.xianyouquezhen{
			height: 100px;
			width: 25%;
			float: left;
		}
		.wuzhengzhuang{
			height: 100px;
			width: 25%;
			float: left;
		}
		.xianyouyisi{
			height: 100px;
			width: 25%;
			float: left;
		}
		.xianyouzhongzheng{
			height: 100px;
			width: 25%;
			float: left;
		}
		.xianyouquezhen1{
			position: relative;
			top: 0px;
			text-align: center;
		}
		.xianyouquezhen2{
			height: 20px;
			width: 160px;
			position: relative;
			top: 10px;
			text-align: center;
			font: 21px PingFangSC-Medium;
			font-weight: bold;
		}
		.dierhang{
			height: 100px;
			width: 100%;
			position: relative;
			top: 0px;
			left: 0px;
		}
		.shuju3{
			height: auto;
			width: 100%;
		}
		.nav {
			overflow: hidden;
			text-align: center;
			background-color: #f4f4f4;
		}
		.nav li {
			float: left;
			padding: 5px;
			width: 45%;
			color: #666;
			list-style: none;
			border-left: 1px solid #f4f4f4;
			cursor: pointer;
		}
		.nav li:hover,.selected {
			background-color:#ecebeb;
			border-left: 1px solid #ecebeb;
		}
		.content{
			border: 1px solid #f4f4f4;
			height: 400px;
			padding: 10px;
			overflow: hidden;
		}
		.xuanzekuang{
			height: 50px;
			width: 40%;
			margin-left: 30%;
		}
		.xuanzekuang_1{
			background-color: gainsboro;
			width: 49%;
			height: 50px;
			text-align: center;
			float: left;
			border-radius: 5px;
		}
		.xuanzekuang_2{
			background-color: gainsboro;
			width: 49%;
			height: 50px;
			text-align: center;
			float: left;
			margin-left: 2%;
			border-radius: 5px;
		}
		.xuanzekuang_1>span{
			height: 50px;
			line-height: 50px;
		}
		.xuanzekuang_2>span{
			height: 50px;
			line-height: 50px;
		}
	</style>


</head>
<body>
<div class="shuju1">
	<div class="title1"><p><h3>国内疫情</h3></p></div>
	<div class="neirong">
		<div id="diyihang">
			<div class="xianyouquezhen">
				<div class="xianyouquezhen1">现有确诊</div>
				<div class="xianyouquezhen2"style="color: #ff6a57;" id="xianyouquezhen">123</div>
			</div>
			<div class="wuzhengzhuang">
				<div class="xianyouquezhen1">新增无症状</div>
				<div class="xianyouquezhen2"style="color: #e86d48;" id="xinzengwuzhengzhuang">123</div>
			</div>
			<div class="xianyouyisi">
				<div class="xianyouquezhen1">新增本土</div>
				<div class="xianyouquezhen2"style="color: #ec9217;" id="xinzengbentu">123</div>
			</div>
			<div class="xianyouzhongzheng">
				<div class="xianyouquezhen1">新增死亡</div>
				<div class="xianyouquezhen2"style="color: #545499;" id="xinzengsiwang">3</div>
			</div>
		</div>
		<div class="dierhang">
			<div class="xianyouquezhen">
				<div class="xianyouquezhen1">累计确诊</div>
				<div class="xianyouquezhen2"style="color: #e83132;" id="leijiquezhen">123</div>
			</div>
			<div class="wuzhengzhuang">
				<div class="xianyouquezhen1">新增境外输入</div>
				<div class="xianyouquezhen2"style="color: #476da0;" id="xinzengjingwai">123</div>
			</div>
			<div class="xianyouyisi">
				<div class="xianyouquezhen1">累计治愈</div>
				<div class="xianyouquezhen2"style="color: #10aeb5;" id="leijizhiyu">123</div>
			</div>
			<div class="xianyouzhongzheng">
				<div class="xianyouquezhen1">累计死亡</div>
				<div class="xianyouquezhen2"style="color: #4d5054;" id="leijisiwang">3</div>
			</div>
		</div>

	</div>
</div>
<div class="shuju3">
	<div id="box" style="width: auto; height: 600px;"></div>
	<script>
		// 初始化echarts实例
		var myEcharts = echarts.init(document.getElementById("box"));
		var option = {
			title: {  //标题样式
				text: '现有确诊人数',
				x: "center",
				textStyle: {
					fontSize: 18,
					color: "red"
				},
			},
			tooltip: {  //这里设置提示框
				trigger: 'item',  //数据项图形触发
				backgroundColor: "red",  //提示框浮层的背景颜色。
				//字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
				formatter: '地区：{b}<br/>现有确诊人数：{c}'
			},
			visualMap: {//视觉映射组件
				top: 'bottom',
				left: 'left',
				min: 10,
				max: 500000,
				text: ['High', 'Low'],
				realtime: false,  //拖拽时，是否实时更新
				calculable: true,  //是否显示拖拽用的手柄
				inRange: {
					color: ['lightskyblue', 'yellow', 'orangered']
				}
			},
			series: [
				{
					name: '模拟数据',
					type: 'map',
					mapType: 'china',
					roam: false,//是否开启鼠标缩放和平移漫游
					itemStyle: {//地图区域的多边形 图形样式
						normal: {//是图形在默认状态下的样式
							label: {
								show: true,//是否显示标签
								textStyle: {
									color: "black"
								}
							}
						},
						zoom: 1.5,  //地图缩放比例,默认为1
						emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
							label: { show: true }
						}
					},
					top: "13%",//组件距离容器的距离
					data: [
						{ name: '北京', value: 350000},
						{ name: '天津', value: 120000 },
						{ name: '上海', value: 300000 },
						{ name: '重庆', value: 92000 },
						{ name: '河北', value: 25000 },
						{ name: '河南', value: 20000 },
						{ name: '云南', value: 500 },
						{ name: '辽宁', value: 3050 },
						{ name: '黑龙江', value: 80000 },
						{ name: '湖南', value: 2000 },
						{ name: '安徽', value: 24580 },
						{ name: '山东', value: 40629 },
						{ name: '新疆', value: 36981 },
						{ name: '江苏', value: 13569 },
						{ name: '浙江', value: 24956 },
						{ name: '江西', value: 15194 },
						{ name: '湖北', value: 41398 },
						{ name: '广西', value: 41150 },
						{ name: '甘肃', value: 17630 },
						{ name: '山西', value: 27370 },
						{ name: '内蒙古', value: 27370 },
						{ name: '陕西', value: 97208 },
						{ name: '吉林', value: 88290 },
						{ name: '福建', value: 19978 },
						{ name: '贵州', value: 94485 },
						{ name: '广东', value: 89426 },
						{ name: '青海', value: 35484 },
						{ name: '西藏', value: 97413 },
						{ name: '四川', value: 54161 },
						{ name: '宁夏', value: 56515 },
						{ name: '海南', value: 54871 },
						{ name: '台湾', value: 48544 },
						{ name: '香港', value: 49474 },
						{ name: '澳门', value: 34594 }
					]
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myEcharts.setOption(option);
	</script>
</div>
<div class="shuju4">
	<ul class="nav">
		<li class="selected">各情况类型占比</li>
		<li>境外输入省级TOP7</li>
	</ul>
	<div class="content">
		<div id="container" style="height: 400px" class="list"></div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
		<!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
		<!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
		<!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
		<!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
		<!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};

			var option;



			option = {

				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
				},
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: '50%',
						data: [
							{value: 1048, name: '现有感染'},
							{value: 735, name: '累计治愈'},
							{value: 580, name: '累计死亡'},
							{value: 484, name: '本地新增'},
							{value: 300, name: '境外输入'}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}

		</script>
		<div id="containers" style="height: 400px" class="list"></div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
		<!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
		<!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
		<!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
		<!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
		<!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

		<script type="text/javascript">
			var dom = document.getElementById("containers");
			var myChart = echarts.init(dom);
			var app = {};

			var option;



			option = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [120, 200, 150, 80, 70, 110, 500],
					type: 'bar'
				}]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}

		</script>
	</div>
	<script>
		$(function(){
			//获取点击事件的对象
			$(".nav li").click(function(){
				//获取要显示或隐藏的对象
				var divShow = $(".content").children('.list');
				//判断当前对象是否被选中，如果没选中的话进入if循环
				if (!$(this).hasClass('selected')) {
					//获取当前对象的索引
					var index = $(this).index();
					//当前对象添加选中样式并且其同胞移除选中样式；
					$(this).addClass('selected').siblings('li').removeClass('selected');
					//索引对应的div块显示
					$(divShow[index]).show();
					//索引对应的div块的同胞隐藏
					$(divShow[index]).siblings('.list').hide();
				}
			});
		});

	</script>
</div>
</body>
</html>